<template>
  <div id="ServiceDetail">
    <div class="banner container-fuild text-center">教练信息</div>
    <div class="container">
      <div class="row">
        <!-- <div class="col-xs-12 col-sm-12 col-md-3" id="myScrollspy">
          <ul class="nav nav-tabs nav-stacked center-block" id="myNav">
            <p>特色服务</p>
            <li
              :class="item.id==id?'active':''"
              v-for="(item,index) in serviceNavList"
              :key="index"
            >
              <a :href="'#'+item.id">{{item.title}}</a>
            </li>
          </ul>
        </div> -->
        <div class="content wow zoomIn">
          <div class="content-block">
            <h2 class="mainBox">
              <div class="avatar">
              <img :src="item.avatar">
            </div>
              {{item.name}}
              <small>/ {{item.age}}岁 / {{item.gender == 1 ? '男' : '女'}} / {{ item.phone }}</small>
            </h2>
            <div v-html="item.desc"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import { getCoachDetailApi } from '@/api/api';
export default {
  name: "ServiceDetail",
  data() {
    return {
      id: null,
      item: {}
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getCoachDetail();
  },
  mounted() {
    var top = document.getElementById(this.id).offsetTop;
    $(window).scrollTop(top + 300);
    $("#myNav").affix({
      offset: {
        top: 300
      }
    });
    var wow = new WOW();
    wow.init();
  },
  methods: {
    getCoachDetail() {
      getCoachDetailApi(this.id).then(res => {
        this.item = res.data;
      })
    }
  },
};
</script>
<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.content-block {
  margin: 50px 0;
}
.content-block > h2 {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.avatar {
  display: inline-block;
  margin-right: 20px;
}
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
</style>
